<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/repeat.css">
    <link rel="stylesheet" href="../css/details.css">
    <link rel="stylesheet" href="../img/iconfont/iconfont.css">
    <script src="../js/details.js" type="module"></script>
    <title>详情页</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div id="header_top">
            <div class="warpper clear_fix">
                <ul id="sitemap">
                    <li><a href="">小米商城</a></li>
                    <li>|<a href="">MIUI</a></li>
                    <li>|<a href="">loT</a></li>
                    <li>|<a href="">云服务</a></li>
                    <li>|<a href="">天星科技</a></li>
                    <li>|<a href="">有品</a></li>
                    <li>|<a href="">小爱开放平台</a></li>
                    <li>|<a href="">企业团购</a></li>
                    <li>|<a href="">资质证照</a></li>
                    <li>|<a href="">协议规则</a></li>
                    <li>|<a href="">下载app
                        <em></em>
                        <div class="Qr_code">
                            <img src="../img/Qr_code.png" alt="" srcset=""><span>小米商城APP</span>
                        </div>
                    </a></li>
                    <li>|<a href="">智能生活</a></li>
                    <li>|<a href="">Select Location</a></li>
                </ul>
                <div id="user">
                    <dl id="login">
                        <dd><a href="">登录</a></dd>
                        <dd>|<a href="">注册</a></dd>
                        <dd>|<a href="">消息通知</a></dd>
                    </dl>
                    <a id="list" >
                        <span class="iconfont icon-gouwuchekong"></span><span>购物车</span><i> (0)</i>
                        <div id="sub_list"><p>购物车中还没有商品，赶紧选购吧!</p></div>
                    </a>
                </div>
                <a href="" ></a>
            </div>
        </div>
        <div id="header_bottom">
            <div class="warpper">
                <img src="../img/logo-mi2.png" alt="" class="logo">
                <ul class="nav">
                    <li><a href="">全部商品分类</a></li>
                    <li><a href="">小米手机</a></li>
                    <li><a href="">Readmi红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="智能"><a href="" class="submit"><span class="iconfont icon-gouwuchekong"></span></a>
                </div>
            </div>
            <div id="sub_nav_box">
                <ul class="sub_nav">
                    <li><a href=""><img src="../img/xiaomi01.png" alt=""><p>小米MIX FOLD</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/xiaomi01.png" alt=""><p>小米11 Uitra</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/xiaomi01.png" alt=""><p>小米11 Pro</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/xiaomi01.png" alt=""><p>小米11 青春版</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/xiaomi01.png" alt=""><p>小米10S</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/xiaomi01.png" alt=""><p>小米11</p><i>9999元起</i></a></li>
                </ul>
                <ul class="sub_nav">
                    <li><a href=""><img src="../img/hongmi01.png" alt=""><p>Note 10 Pro</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/hongmi01.png" alt=""><p>Redmi Note 10 5G</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/hongmi01.png" alt=""><p>K40 游戏增强版</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/hongmi01.png" alt=""><p>K40 Pro 系列</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/hongmi01.png" alt=""><p>Redmi K40</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/hongmi01.png" alt=""><p>Redmi Note 9 系列</p><i>9999元起</i></a></li>
                </ul>
                <ul class="sub_nav">
                    <li><a href=""><img src="../img/dianshi01.png" alt=""><p>小米电视6 至尊版 55英寸</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/dianshi01.png" alt=""><p>小米电视 ES55 2022款</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/dianshi01.png" alt=""><p>小米电视大师 82英寸</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/dianshi01.png" alt=""><p>小米透明电视</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/dianshi01.png" alt=""><p>小米电视 大师 65英寸OLED</p><i>9999元起</i></a></li>
                    <div class="line"></div>
                    <li><a href=""><img src="../img/dianshi01.png" alt=""><p>Redmi 智能电视 MAX 98"</p><i>9999元起</i></a></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 侧边栏 -->
    <ul id="sidebar">
        <li>
            <span class="iconfont icon-gouwuchekong"></span><p>手机APP</p>
            <div class="Qr_code"><img src="../img/Qr_code.png" alt="" srcset=""><p>扫码领取新人百元礼包</p><i></i></div>
        </li>
        <li><span class="iconfont icon-gouwuchekong"></span><p>个人中心</p></li>
        <li><span class="iconfont icon-gouwuchekong"></span><p>售后服务</p></li>
        <li><span class="iconfont icon-gouwuchekong"></span><p>人工客服</p></li>
        <li><span class="iconfont icon-gouwuchekong"></span><p>购物车</p></li>
        <li id="top" class="none"><span class="iconfont icon-gouwuchekong"></span><p>回顶部</p></li>
    </ul>
    <main>
        <!-- 顶部导航 -->
        <div id="details_top">
            <div class="warpper">
                <p class="products"><em>小米11 青春版</em><i>|</i><a href="">小米10青春</a></p>
                <ul class="page">
                    <li><a href="">概述页</a></li>
                    <li><i>|</i><a href="">参数页</a></li>
                    <li><i>|</i><a href="">F码通道</a></li>
                    <li><i>|</i><a href="">资讯客服</a></li>
                    <li><i>|</i><a href="">用户评价</a></li>
                </ul>
            </div>
        </div>
        <!-- 主体部分 -->
        <div id="details_main" class="warpper">
            <!-- 左侧图片 -->
            <div id="details_show">
                <div class="details_img"><img src="../img/details_show01.jpg" alt=""><img src="../img/details_show02.jpg" alt=""></div>
                <div class="control">
                    <span class="iconfont icon-gouwuchekong"></span><span class="iconfont icon-gouwuchekong"></span>
                    <div class="details_toggle"><span id="1" class="on"></span><span id="2"></span></div>
                </div>
            </div>
            <!-- 右侧商品选择 -->
            <div id="details_select">
                <h3>小米11 青春版</h3>
                <p class="state"><span>「享6期免息，信用卡分期至高立减80元，+1元得生生不息果冻包，购开学套餐赠米家台灯Lite，直播间下单享专属福利」</span>轻薄、多彩 / 骁龙780G / 专业电影相机，前置超级夜景 / AMOLED 柔性直屏 / 超线性立体声双扬声器</p>
                <em>小米自营</em>
                <div class="products_prices"><em>2099 元</em><i>2299 元</i></div>
                <p id="user_addr">
                    <span class="iconfont icon-gouwuchekong"></span>
                    <i class="province">浙江</i><i class="city">杭州</i><i class="county">西湖区</i></i><i class="area">西溪街道</i>
                    <a href="" id="set_addr">修改</a><em class="spot">有现货</em>
                </p>
                <!-- 商品类型选择 -->
                <div id="products_select">
                    <section class="products_version">
                        <div class="item_title"><h4>选择版本</h4></div>
                        <div class="item_select">
                            <a class="item_one" href="" class="on">8GB+128GB</a>
                            <a class="item_one" href="">8GB+256GB</a>
                        </div>
                    </section>
                    <section class="products_color">
                        <div class="item_title"><h4>选择颜色</h4></div>
                        <div class="item_select">
                            <a class="item_one" href="" class="on">清凉薄荷</a>
                            <a class="item_one" href="">冰峰黑提</a>
                            <a class="item_one" href="">清甜荔枝</a>
                            <a class="item_one" href="">樱花蜜粉</a>
                        </div>
                    </section>
                    <section class="products_bind">
                        <div class="item_title"><h4>选择套装</h4></div>
                        <div class="item_select">
                            <a class="item_one" href="" class="on">标准版</a>
                            <a class="item_one" href="">套装版（赠充电器）</a>
                            <a class="item_one" href="">开学套餐A</a>
                            <a class="item_one" href="">开学套餐B</a>
                        </div>
                    </section>
                    <section class="products_bind">
                        <div class="item_title"><h4>选择小米提供的意外保险</h4><a href="">了解意外保护 ></a></div>
                        <div class="item_select">
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>意外保障服务<span>意外损免费修</span></p>
                                    <span>1年1次意外损坏 官方原装 免费维修</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>299元</span>
                            </div>
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>碎屏保障服务<span>碎屏免费修</span></p>
                                    <span>1年1次碎屏 官方原厂 免费维修</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>789元</span>
                            </div>
                        </div>
                    </section>
                    <section class="products_maintain">
                        <div class="item_title"><h4>选择小米提供的延长保修</h4><a href="">了解延长保修 ></a></div>
                        <div class="item_select">
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>延长保修服务<span>质保延长1年</span></p>
                                    <span>性能故障 官方原厂 多次免费维修</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>99元</span>
                            </div>
                        </div>
                    </section>
                    <section class="products_storage">
                        <div class="item_title"><h4>选择小米提供的云空间服务</h4><a href="">了解云空间服务 ></a></div>
                        <div class="item_select">
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>云空间年卡200G<span>208元</span></p>
                                    <span>主商品签收后，自动激活至下单账号</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>208元</span>
                            </div>
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>云空间年卡50G<span>58元</span></p>
                                    <span>主商品签收后，自动激活至下单账号</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>58元</span>
                            </div>
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>云空间月卡200G<span>21元</span></p>
                                    <span>主商品签收后，自动激活至下单账号</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>21元</span>
                            </div>
                            <div class="item_one">
                                <i><span class="iconfont icon-gouwuchekong"></span></i>
                                <img src="../img/icon01.png" alt="">
                                <div class="item_txt">
                                    <p>云空间月卡50G<span>6元</span></p>
                                    <span>主商品签收后，自动激活至下单账号</span>
                                    <div class="agree"><input type="checkbox" name="" id=""  style=" border-color: blueviolet;"><span>我已阅读<a href="">服务条款 |</a><a href="">常见问题</a></span></div>
                                </div>
                                <span>6元</span>
                            </div>
                        </div>
                    </section>
                </div>
                <div id="total">
                    <p class="total_version"><span>小米11 青春版 8GB+128GB 清凉薄荷</span><span>2099元<i>2299元</i></span></p>
                    <p class="total_version"><span>云空间月卡200G</span><span>21元</span></p>
                    <p class="total_price">总计：2099元</p>
                </div>
                <button id="add_list" type="submit">加入购物车</button>
                <button id="add_like" type="button"><span class="iconfont icon-gouwuchekong">喜欢</span></button>
                <ul class="point">
                    <li><span class="iconfont icon-gouwuchekong">小米自营</span></li>
                    <li><span class="iconfont icon-gouwuchekong">小米发货</span></li>
                    <li><span class="iconfont icon-gouwuchekong">7天无理由退货</span></li>
                    <li><span class="iconfont icon-gouwuchekong">运费说明</span></li>
                    <li><span class="iconfont icon-gouwuchekong">企业信息</span></li>
                    <li><span class="iconfont icon-gouwuchekong">7天价格保护</span></li>
                </ul>
            </div>
        </div>
        <div class="details_content">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8c1da8e4597f7ffff88a8211bdb4afdb.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca2e39443540ffa070e08b29883b4fe5.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66e880b19134ba5f35e5c0dd2e74ef2.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b9edbb695b9b2d9981e2e09feb19313a.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3d464fb5068bf993088b31181551431.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/414e0b68b2157dbacb696255aeff8c1f.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/76e523f8a98071e93c069ef798c6cdf6.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d1451c4e1ea149c2f12063a14e634230.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61ffc9d8bf23dc850ae696fa097a9162.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2562840423c0a8ba0070db64ced53fdf.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3e86f0ebb9e3673bba6635dcad4f25a.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c55863f84c3a48e40841212e24321099.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35a52b3106e32b1ec36813f307836511.jpg" alt="" srcset="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/26c627211f3877db343b8455f6dcb190.jpg" alt="" srcset="">
        </div>
        <!-- 底部说明 -->
        <div id="price_state">
            <div class="warpper"><h4>官方微信</h4><img src="https://i8.mifile.cn/b2c-mimall-media/1a84b2b629512205bf528aae91361efb.jpg" alt="" srcset=""></div>
            <div class="warpper"><h4>价格说明</h4><img src="../img/price_state.jpeg" alt="" srcset=""></div>
    </main>

    <!-- 尾部 -->
    <footer>
        <div class="footer_top warpper">
            <ul id="service">
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>预约维修服务</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>7天无理由退货</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>15天免费换货</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>满69包邮</span></a></li>
                <li><a href=""><span class="iconfont icon-gouwuchekong"></span><span>520余家售后网点</span></a></li>
            </ul>
            <div id="more">
                <ul class="link">
                    <li>
                        <h4>帮助中心</h4>
                        <a href="">账户管理</a>
                        <a href="">购物指南</a>
                        <a href="">订单操作</a>
                    </li>
                    <li>
                        <h4>服务支持</h4>
                        <a href="">售后政策</a>
                        <a href="">自助服务</a>
                        <a href="">相关下载</a>
                    </li>
                    <li>
                        <h4>线下门店</h4>
                        <a href="">小米之家</a>
                        <a href="">服务网点</a>
                        <a href="">授权体验店</a>
                    </li>
                    <li>
                        <h4>关于小米</h4>
                        <a href="">了解小米</a>
                        <a href="">加入小米</a>
                        <a href="">投资者关系</a>
                        <a href="">企业社会责任</a>
                        <a href="">廉洁举报</a>
                    </li>
                    <li>
                        <h4>关注我们</h4>
                        <a href="">新浪微博</a>
                        <a href="">官方微信</a>
                        <a href="">联系我们</a>
                        <a href="">公益基金会</a>
                    </li>
                    <li>
                        <h4>特色服务</h4>
                        <a href="">F码通道</a>
                        <a href="">礼物码</a>
                        <a href="">防伪查询</a>
                    </li>
                </ul>
                <div class="contact">
                    <h4>400-100-5678</h4>
                    <p>8:00-18:00（仅收市话费）</p>
                    <div class="manual_service">
                        <span class="iconfont icon-gouwuchekong"></span><span>人工服务</span>
                    </div>
                    <p>关注小米：<span class="iconfont icon-gouwuchekong"></span><span class="iconfont icon-gouwuchekong"></span></p>
                </div>
            </div>
        </div>
        <div class="footer_bottom">
            <div class="warpper">
                <img src="../img/logo-mi2.png" alt="" class="logo">
                <div class="information">
                    <ul class="Affiliation clear_fix">
                        <li><a href="">小米商城</a></li>
                        <li><a href="">MIUI</a></li>
                        <li><a href="">米家</a></li>
                        <li><a href="">米聊</a></li>
                        <li><a href="">多看</a></li>
                        <li><a href="">游戏</a></li>
                        <li><a href="">政企服务</a></li>
                        <li><a href="">小米天猫店</a></li>
                        <li><a href="">小米集团隐私政策</a></li>
                        <li><a href="">小米公司儿童信息保护规则</a></li>
                        <li><a href="">小米商城隐私政策</a></li>
                        <li><a href="">小米商城用户协议</a></li>
                        <li><a href="">问题反馈</a></li>
                        <li><a href="">Select Location</a></li>
                        <li><a href="">北京互联网法院法律服务工作站</a></li>
                        <li><a href="">中国消费者协会</a></li>
                        <li><a href="">北京市消费者协会</a></li>
                    </ul>
                    <div class="license">
                        <p>© <a href="">mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2020]0276-042号</a></p>
                        <p> <a href="">（京）网械平台备字（2018）第00005号</a> <a href="">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="">营业执照</a> <a href="">医疗器械质量公告</a></p>
                        <p> <a href="">增值电信业务许可证</a>网络食品经营备案 京食药网食备202010048 <a href="">食品经营许可证</a></p>
                        <p>违法和不良信息举报电话：171-5104-4404 <a href="">知识产权侵权投诉</a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                        <p><a href=""><img src="../img/truste.png"></a><a href=""><img src="../img/truste.png"></a><a href=""><img src="../img/truste.png"></a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_slogan"></div>
    </footer>
</body>
</html>